<!--
 * @author: Spring
 * @create: 2021-06-24 09:11 AM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-07-01 15:47 PM
 * @desc: 
-->
<template>
  <div class="container">
    <div class="box">
      <div class="comment">
        <div class="profile">
          <img :src="$image($store.state.info.icon)" alt="" />
        </div>
        <div class="inputbox">
          <div
            class="edit_box"
            :style="{
              border: focus
                ? 'border: 1px solid #027fff'
                : '1px solid hsla(0, 0%, 59.2%, 0.2)',
            }"
          >
            <div
              class="edit"
              contenteditable="true"
              placeholder="请输入评论..."
              @focus="focus = true;focusFunc"
              @blur="focus = false"
              @input="content($event)"
              ref="edit"
            ></div>
            <div class="img_link">
              <div
                class="chooseImg"
                v-for="(item, index) in imgArr"
                :key="item"
              >
                <img :src="$image(item)" alt="" />
                <span class="el-icon-error" @click="removeImg(index)"></span>
              </div>
            </div>
          </div>
          <div class="handle">
            <div class="left">
              <div class="face" @click.stop="showFace($event)">
                <img src="/img/svg/face.svg" alt="" />表情
                <face
                  style="zindex: 9999"
                  class="facezj"
                  @face="face"
                  :show="show.face"
                />
              </div>

              <el-upload
                action="http://api_devss.wanxikeji.cn/api/savePic"
                :show-file-list="false"
                name="img"
                accept="image/jpeg,image/gif,image/png"
                :on-success="handleSuccess"
                :limit="9"
                multiple
                class="upload"
              >
                <div class="img"><img src="/img/svg/img.svg" alt="" />图片</div>
              </el-upload>
            </div>
            <div class="submit" @click="submit">评论</div>
          </div>
        </div>
      </div>
      <othercomment v-for="item in commentFor" :key="item.comment_id" :item="item" />
    </div>
  </div>
</template>

<script>
import face from "./Face.vue";
import othercomment from './OtherComment.vue'
import {addcomment,commentlist} from '/utils/api.js'

export default {
  inject:['reload'],
  props: ["comment","article_id"],
  data() {
    return {
      show: {
        face: false,
      },
      focus: false,
      imgArr:[],
      inputContent:'',
      commentFor:''
    };
  },
  components: {
    face,
    othercomment
  },
  mounted() {
    this.commentFor=this.comment.filter(item=>{
      return item.father_id==0
    })
    if(!this.comment.icon){
      this.comment.icon='https://sf1-ttcdn-tos.pstatp.com/img/mosaic-legacy/3795/3033762272~300x300.image'
    }

  },
  methods: {

    submit(){
      if(this.$refs.edit.innerHTML==""&&this.inputContent==''){
        this.$message('你输入的内容为空','error')
        return
      }
      let obj={
        token:this.$store.state.token,
        article_id:this.article_id,
        comment_info:JSON.stringify({
          content:this.inputContent||this.$refs.edit.innerHTML,
          imgs:this.imgArr
        })
      }
      addcomment(obj).then(res=>{
        console.log(res);
        this.reload()
      })
    },
    //模拟双向绑定
    content(e){
      this.inputContent=e.target.innerHTML
    },
    face(item) {
      console.log("111");
      this.$refs.edit.innerHTML += `<img src=${item} style="width:22px;height:22px"/>`;
      this.$refs.edit.focus();
    },
    focusFunc() {
      this.$store.commit("judgeLogin");
    },
    showFace(e) {
      console.log(e.target);
      console.log(e.target.getAttribute("only"));
      if (e.target.getAttribute("only")) {
        return;
      }
      this.show.face = !this.show.face;
    },
    handleSuccess(response, file, fileList) {
      this.imgArr.push(response.data);
      console.log(this.imgArr);
    },
    removeImg(index) {
      this.imgArr.splice(index);
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 20px 10px;
  .comment {
    width: 100%;
    background-color: #fafbfc;
    box-sizing: border-box;
    padding: 12px 16px;
    @include flex(space-between, flex-start);
    .profile {
      width: 32px;
      height: 32px;
      margin-right: 12px;
      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
    }
    .inputbox {
      flex: 1;
      .edit_box {
        flex: 1;
        min-height: 22px;
        box-sizing: border-box;
        padding: 0 10px;
        background-color: #fff;
        .edit {
          flex: 1;
          min-height: 22px;
          border: none;
          outline: none;
          overflow: auto;
          text-align: left;
          line-height: 24px;
          font-size: 12px;
        }
        .edit:empty::before {
          content: attr(placeholder);
          color: #a2a3a3;
          font-size: 12px;
        }
        /*不一样的地方*/
        .edit:focus {
          content: none;
        }
        .img_link {
          @include flex(flex-start, center);
          flex-wrap: wrap;
          .chooseImg {
            width: 80px;
            height: 80px;
            position: relative;
            margin-right: 8px;
            margin-bottom: 8px;
            span {
              position: absolute;
              top: 3px;
              right: 3px;
              cursor: pointer;
            }
            img {
              width: 80px;
              height: 80px;
              cursor: pointer;
            }
          }
          .addImg {
            width: 80px;
            height: 80px;
            border: 1px dashed #c5c5c5;
            cursor: pointer;
            @include font(50px, #d2d2d2);
            @include flex();
          }
        }
      }
      .handle {
        @include flex(space-between);
        margin-top: 10px;
        .left {
          @include flex(flex-start);
          div {
            cursor: pointer;
            @include flex(center, center);
            @include font(13px, #027fff);
          }
          .face {
            position: relative;
            margin-right: 15px;
            .facezj {
              position: absolute;
              top: 32px;
              left: 0;
              width: 304px;
              height: 234px;
              box-sizing: border-box;
              padding: 12px;
              @include flex(flex-start, center, column);
            }
          }
          .img {
            .upload {
              cursor: pointer;
              @include flex(center, center);
              @include font(13px, #027fff);
            }
          }
        }
        .submit {
          width: 61px;
          height: 31px;
          background-color: #027fff;
          color: #fff;
          border-radius: 2px;
          cursor: pointer;
          @include flex();
        }
      }
    }
  }

}
</style>
